<template>
  <n-form label-placement="left" :model="registerForm" label-width="80"  >

    <n-form-item-row label="邮箱" path="email">
      <n-input
          v-model:value="registerForm.email">
        <template #prefix>
          <n-icon :component="Mail"/>
        </template>
      </n-input>

    </n-form-item-row>

    <n-form-item-row label="验证码" path="code">
      <n-input-group>
        <n-input
            v-model:value="registerForm.code"
            auto-complete="new-password">
          <template #prefix>
            <n-icon :component="Text"/>
          </template>
        </n-input>
        <n-button @click="sendCode" :loading="emailCheckLoading">
          获取验证码
        </n-button>
      </n-input-group>
    </n-form-item-row>

    <n-form-item-row label="密码" path="password">
      <n-input
          v-model:value="registerForm.password"
          type="password"
          placeholder="密码,纯数字" clearable>
        <template #prefix>
          <n-icon :component="BagOutline"/>
        </template>
      </n-input>
    </n-form-item-row>

    <n-form-item-row label="重复密码" path="password2">
      <n-input

        v-model:value="registerForm.password2"
               type="password"
               show-password-on="mousedown"
               placeholder="重复密码,纯数字" clearable>
        <template #prefix>
          <n-icon :component="BagOutline"/>
        </template>
      </n-input>
    </n-form-item-row>
  </n-form>
  <n-button block @click="handleRegister" :loading="registerLoading">注册</n-button>
</template>

<script lang="ts">
import { defineComponent, onMounted, reactive, ref} from "vue";
import {IRegisterFormType} from "@/interface/modules/system";
import {BagOutline, Moon, Person, QrCode, SunnySharp, Mail, Text} from '@vicons/ionicons5';
import {userController} from "@/api";

export default defineComponent({
  name: "RegisterForm",
  emits: ["doRegister"],
  setup(props, {emit}) {
    const registerForm = reactive<IRegisterFormType>({
      username: undefined,
      password: undefined,
      password2: undefined,
      code: undefined,
      email: ''
    })
    // 验证码
    const captchaCode = ref<string | undefined>(undefined)
    const emailCheckLoading = ref(false)
    const registerLoading = ref(false)
    // 获取验证码
    const getCaptcha = () => {
      userController.captcha().then(res => {
        captchaCode.value = res.data.img
      })
    }

    onMounted(() => {
      getCaptcha()
    })
    // 注册
    const handleRegister = () => {
      if (!registerForm.email) {
        window.$message.error('请输入邮箱')
        return
      }

      const regEmail = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if (!regEmail.test(registerForm.email)) {
        window.$message.error('请输入合法的邮箱地址')
        return
      }

      if (!registerForm.code) {
        window.$message.error('请输入验证码')
        return
      }
      if (!registerForm.password) {
        window.$message.error('请输入密码')
        return
      }

      if (!isNumeric(registerForm.password)) {
        window.$message.error('密码需是纯数字')
        return
      }

      if (registerForm.password.length < 6 || registerForm.password.length > 15){
        window.$message.error('密码长度不能小于6位,大于15位')
        return
      }
      if (!registerForm.password2) {
        window.$message.error('请再次输入密码')
        return
      }
      if (registerForm.password !== registerForm.password2) {
        window.$message.error('两次密码输入不一致')
        return
      }

      registerLoading.value = true
      userController.register(registerForm).then(res => {
        if (res.code == 200){
          window.$notification.success({
            title: "注册成功",
            content: "注册成功,请登录",
            duration: 2500,
          })
        }
      }).finally(() => {
        registerLoading.value = false
      })
    }

    const isNumeric = (str:string) =>{
      return /^\d+$/.test(str);
    }
    const emailCheck = () => {
      if (!registerForm.email) return
      emailCheckLoading.value = true
      userController.emailCheck(registerForm.email).then(res => {
        if (res.code == 200) {
          window.$notification.success({
            title: "邮箱验证",
            content: "邮箱验证成功",
            duration: 2500,
          })
        }
      }).finally(() => {
        emailCheckLoading.value = false
      })
    }

    const sendCode = () => {
      if (!registerForm.email) return
      // 校验邮箱
      const regEmail = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;
      if (!regEmail.test(registerForm.email)) {
        window.$message.error('请输入合法的邮箱地址')
        return
      }
      emailCheckLoading.value = true
      userController.emailCheck(registerForm.email).then(res => {
        if (res.code == 200) {
          userController.createVerifyCode(registerForm.email).then(res => {
            if (res.code == 200) {
              window.$notification.success({
                title: "验证码",
                content: "验证码已发送,请注意查收",
                duration: 2500,
              })
            }
          })
        }
      }).finally(() => {
        emailCheckLoading.value = false
      })
    }

    return {
      registerForm,
      handleRegister,
      captchaCode,
      getCaptcha,
      emailCheckLoading,
      emailCheck,
      sendCode,
      registerLoading,
      BagOutline, Moon, Person, QrCode, SunnySharp, Mail, Text
    }
  }
})
</script>

<style scoped>

</style>
